<template>
  <div class="home">
    <div class="header-card">
      <div :class="['header', { active: headerActive }]">
        <!-- <div class="header-l" style="font-size: 10vw;color:rgb(255, 196, 196)">WeSlots</div> -->
        <div class="down">
          <div class="header-l"><img src="@/assets/img/bannerIcon.png" /></div>
          <!-- <button class="header-1" style="width:5.3125rem;height:1.875rem" type="menu">DownLoad</button>
           -->
          <div class="header-l1">
            <!-- download app-->
            <div
              class="text-overlay"
              style="color: white; display: flex; font-size: 0.7rem"
            >
              <a
                href="https://d21ei325leplyc.cloudfront.net/apk/luckwiner_TT1003.apk"
                style="color: white"
                >{{ $t("DownloadAPP") }}
              </a>
            </div>
            <img src="@/assets/img/19.png" alt="" />
          </div>
        </div>
        <!-- <div class="header-l" style="color:rgb(255, 196, 196)">download</div> -->
        <!-- <div class="header-l"><img src="@/assets/img/Gameplay@2x.png" /></div> -->
        <div class="header-r">
          <!-- <div class="iconbox" @click="$router.push('/search')">
            <img src="@/assets/img/search.png" />
          </div> -->
          <!-- <div class="iconbox" @click="$router.push('/message')">
            <img src="@/assets/img/10.png" v-if="!SMessage" />
            <img src="@/assets/img/10.png" v-if="SMessage" />
          </div> -->
          <div class="iconbox at">
            <span
              v-if="isLogin && avatar != ''"
              class="at-icon"
              @click="$router.push('/ucenter')"
            >
              <img :src="avatar" alt="" />
              <!-- <span v-else></span> -->
              <!-- <img src="@/assets/img/loginn.jpg" alt=""> -->
            </span>
            <span
              v-else-if="isLogin && avatar == ''"
              class="at-icon"
              @click="$router.push('/ucenter')"
              :style="{ background: `#${background}` }"
              >{{ mobileOrEmail?.[0] }}</span
            >
            <span v-else class="no-at" @click="goToLoginPage">
              <img src="@/assets/img/loginn.jpg" alt=""
            /></span>
            <!-- @click="$router.push('/Register')" -->
          </div>
          <div class="iconbox language">
            <img
              src="@/assets/img/language.png"
              alt=""
              @click="isShow = !isShow"
            />
            <ul class="dropdown-menu" v-show="isShow">
              <li
                v-for="(item, index) of langs"
                :key="index"
                :class="selectIndex == index ? 'isActive' : ''"
                @click="changeLang(item.value, index)"
                style="color: #fff"
              >
                {{ item.text }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="part5" v-if="isLogin">
        <div class="p5-l">
          <div class="p5-1-pp">
            <div class="p5-l-p1">
              <span>
                {{ isLogin ? formatMoney(assets_total, true) : "--" }}
                {{ $t("USD") }}
              </span>
            </div>
            <!-- <div
              class="order"
              @click="$router.push('/assetCente')"
              v-if="isLogin"
            >
              {{ $t("message") }}
              <van-icon name="arrow" />
            </div> -->
            <!-- <div class="p5-l-p1">
            
              <img class="inline-block" src="@/assets/img/gold.png" alt="" />
              <span>
                {{ isLogin ? formatMoney(gold, true) : "--" }}
              </span>
            </div> -->
          </div>
          <div class="p5-l-p2" v-if="isLogin">
            <div
              class="p5-l-p2-item p5-l-p2-item-1"
              @click="$router.push('/exchange')"
            >
              <!-- <img src="@/assets/img/lock.png" /> -->
              <p>{{ $t("Exchange") }}</p>
            </div>
            <div
              class="p5-l-p2-item p5-l-p2-item-2"
              @click="$router.push('/recharge')"
            >
              <!-- <img src="@/assets/img/lock.png" /> -->
              <p>{{ $t("Recharge") }}</p>
            </div>
            <!-- <div
              class="p5-l-p2-item p5-l-p2-item-3"
              @click="$router.push('/withdrawal')"
            >
              <img src="@/assets/img/lock.png" />
              <p>{{ $t("Withdrawal") }}</p>
            </div> -->
          </div>
          <!-- <div
            class="p5-l-p2"
            @click="$router.push('/recharge')"
            v-if="isLogin"
          >
            Recharge
          </div> -->
        </div>
        <!-- <div class="p5-r" @click="$router.push('/assetCente')" v-if="isLogin"> -->
        <!-- <img src="@/assets/img/p5-r.jpg" alt="" /> -->
        <!-- <img src="@/assets/img/buy1.png" alt="" /> -->
        <!-- <p>Buy</p> -->
        <!-- </div> -->
      </div>

      <div class="swiperbox">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <!-- <van-swipe-item
            ><img src="../assets/img/bannerrr.jpg"
          /></van-swipe-item> -->
          <van-swipe-item
            v-for="(v, index) in banners"
            :key="index"
            @click="bannerClick(v)"
          >
            <img :src="v.cover" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- <div style="background-color:#F9F3DD ;"> -->
    <div class="gamesTabs">
      <ul>
        <li
          v-for="(item, index) in ganmeClass"
          :key="index"
          @click="getTwoList(item, index)"
          :class="currentIndex === index ? 'active' : ''"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="selectType" v-if="cateList.length > 0 && sortList.length > 0">
        <div class="dropdown" @click="cateToggleDropdown">
          <div class="dropdown-selected">
            {{ cateSelected || "请选择" }}<van-icon name="arrow-down" />
          </div>
          <div v-if="isCateOpen" class="dropdown-content">
            <div
              v-for="option in cateList"
              :key="option.value"
              class="dropdown-item"
              @click.stop="selectCateOption(option)"
            >
              {{ option.name }}
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="dropdown" @click="sortToggleDropdown">
          <div class="dropdown-selected">
            {{ sortSelected || "请选择" }}<van-icon name="arrow-down" />
          </div>
          <div v-if="isSortOpen" class="dropdown-content">
            <div
              v-for="option in sortList"
              :key="option.value"
              class="dropdown-item"
              @click.stop="selectSortOption(option)"
            >
              {{ option.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="cont">
        <div class="cont-right-box">
          <div class="nodata" v-show="pages.nodata">
            <img src="@/assets/img/default.jpg" />
            <p>{{ $t("NoData") }}</p>
          </div>
          <div v-if="currentIndex == 0">
            <div
              :class="['grid', gridClass(group.number)]"
              v-for="(group, idx) in homeGameList"
              :key="idx"
            >
              <template v-if="group.number === 4">
                <div
                  v-for="(v1, index) in groupedLists(group.list)"
                  :key="index"
                  class="gameList"
                >
                  <div
                    v-if="v1[0]"
                    class="item large-item"
                    @click="start(v1[0].id)"
                  >
                    <img :src="v1[0].icon" alt="icon" />
                    <div class="text">{{ v1[0].name }}</div>
                  </div>
                  <div class="small-items">
                    <div
                      v-if="v1[1]"
                      class="item small-item"
                      @click="start(v1[1].id)"
                    >
                      <img :src="v1[1].icon" alt="icon" />
                      <div class="text">{{ v1[1].name }}</div>
                    </div>
                    <div
                      v-if="v1[2]"
                      class="item small-item"
                      @click="start(v1[2].id)"
                    >
                      <img :src="v1[2].icon" alt="icon" />
                      <div class="text">{{ v1[2].name }}</div>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="group.number === 5">
                <div
                  v-for="(v1, index) in groupedLists(group.list)"
                  :key="index"
                  class="gameList"
                >
                  <div
                    :class="
                      !v1[2]
                        ? v1[1]
                          ? 'small-items2'
                          : 'small-items1'
                        : 'small-items'
                    "
                  >
                    <div
                      v-if="v1[0]"
                      class="small-item"
                      @click="start(v1[0].id)"
                    >
                      <img :src="v1[0].icon" alt="icon" />
                      <div class="text">{{ v1[0].name }}</div>
                    </div>
                    <div
                      v-if="v1[1]"
                      class="small-item"
                      @click="start(v1[1].id)"
                    >
                      <img :src="v1[1].icon" alt="icon" />
                      <div class="text">{{ v1[1].name }}</div>
                    </div>
                  </div>
                  <div v-if="v1[2]" class="large-item" @click="start(v1[2].id)">
                    <img :src="v1[2].icon" alt="icon" />
                    <div class="text">{{ v1[2].name }}</div>
                  </div>
                </div>
              </template>
              <template
                v-if="
                  group.number == 1 || group.number == 2 || group.number == 3
                "
              >
                <div
                  v-for="(val, index) of group.list"
                  class="gameList"
                  :key="index"
                >
                  <div class="gameBox" @click="start(val.id)">
                    <img :src="val.icon" />
                    <div class="text">{{ val.name }}</div>
                  </div>
                </div>
              </template>
              <template v-if="group.number == 6">
                <div
                  v-for="(val, index) of group.list"
                  class="gameList1"
                  :key="index"
                >
                  <div class="gameBox1" @click="start(val.id)">
                    <img :src="val.icon" />
                    <div class="text">{{ val.name }}</div>
                  </div>
                </div>
              </template>
            </div>
          </div>
          <van-pull-refresh
            v-else
            v-model="refreshing"
            @refresh="onRefresh"
            loosing-text="释放即可刷新"
            pulling-text="下拉刷新"
          >
            <van-list
              v-model="listLoading"
              :finished="finished"
              :finished-text="finishedText"
              loading-text="加载中..."
              @load="onLoad(currentIndex)"
            >
              <div class="wallet" :class="['grid', gridClass1()]">
                <div
                  v-for="(_item, index) in list"
                  :key="index"
                  class="crb-item"
                  @click="start(_item.id)"
                >
                  <div class="imgbox">
                    <img :src="_item.icon" />
                    <div class="text">{{ _item.name }}</div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
    <iframe v-if="iframeUrl" :src="iframeUrl"></iframe>
  </div>
</template>

<script>
import {
  httpHomeBanner,
  httpGameBalance,
  httpGameClass,
  httpHomeRecommend,
  httpEnterGame,
  httpPrepareEnterGame,
  httpInfo,
  httpHomeList,
} from "@/http/api";
import { formatMoney } from "@/utils/common";
export default {
  name: "home",
  data() {
    return {
      banners: [], // banner
      ganmeClass: [], // 游戏分类列表
      classActive: "", // 选中的分类
      pages: {
        // 分页信息
        page: 1,
        total: 0,
        nodata: false,
      },
      listAjax: false,
      listLoading: false,
      list: [], //列表数据
      mbaShow: true,
      sid: "",
      assets_total: "--", // 总资产
      gold: "",
      leftBarActive: false,
      // isLogin: true,
      isLogin: localStorage.getItem("TOKEN") ? true : false,
      curLanguage: localStorage.getItem("accept_language"),
      mobileOrEmail: localStorage.getItem("mobile")
        ? localStorage.getItem("mobile")
        : localStorage.getItem("email"),
      background: localStorage.getItem("bgck") || "ccc",
      headerActive: false,
      avatar: localStorage.getItem("avatar") || "",
      iframeUrl: "",
      SMessage: sessionStorage.getItem("SMessage") || null,
      is_agent: localStorage.getItem("is_agent"),
      langs: [
        { text: "English", value: "en" },
        { text: "ภาษาไทย", value: "th" },
        { text: "Português", value: "pt" },
      ],
      isShow: false,
      selectIndex: null,
      cateList: [],
      sortList: [],
      isCateOpen: false,
      isSortOpen: false,
      cateSelected: 0,
      sortSelected: "",
      currentIndex: 0,
      finished: false,
      refreshing: false,
      loading: false,
      lastScrollTop: 0, // 记录上一次滚动位置
      homeGameList: [],
      finishedText: "没有更多了",
    };
  },
  async created() {
    this.getHttpGameBalance();
    this.getHttpHomeBanner();
    await this.getHttpGameClass();

    // this.getHttpPrepareEnterGame();
    this.getHttpInfo();
    // this.getGamesList(0);
    this.getHomeGamesList(0);
    // this.onLoadList(0);
    this.selectIndex = this.langs.findIndex(
      (item) => item.value === this.curLanguage
    );
    // const invitedCode = this.$route.query.invite_code;
  },
  computed: {
    currentLan() {
      return this.langs.find((item) => item.value === this.curLanguage);
    },
  },
  methods: {
    gridClass(number) {
      if (number !== 4 && number !== 5) {
        if (number == 6) {
          return `columns-4`;
        } else {
          return `columns-${number}`;
        }
      }
    },
    gridClass1() {
      let obj = this.ganmeClass[this.currentIndex];
      if (obj) {
        return `columns-${obj.number}`;
      }
    },
    groupedLists(list) {
      // 将 list 数据分组为每个子数组包含三个元素
      const groups = [];
      for (let i = 0; i < list.length; i += 3) {
        groups.push(list.slice(i, i + 3));
      }
      return groups;
    },
    getTwoList(item, index) {
      this.currentIndex = index;
      this.cateList = item.category_list || [];
      this.sortList = item.sort_list || [];
      if (item.category_list.length > 0 && item.sort_list.length > 0) {
        this.cateSelected = item.category_list[0].name || "";
        this.sortSelected = item.sort_list[0].name || "";
      }
      this.pages.page = 1;
      this.list = [];
      this.finished = false;
      this.pages.nodata = false;
      if (index == 0) {
        this.getHomeGamesList();
      } else {
        this.getGamesList(index);
      }
    },
    cateToggleDropdown() {
      this.isCateOpen = !this.isCateOpen;
    },
    selectCateOption(option) {
      this.cateSelected = option.name;
      this.isCateOpen = false;
      this.pages.page = 1;
      this.list = [];
      this.finished = false;
      this.getGamesList(this.currentIndex);
    },
    sortToggleDropdown() {
      this.isSortOpen = !this.isSortOpen;
    },
    selectSortOption(option) {
      this.sortSelected = option.name;
      this.isSortOpen = false;
      this.pages.page = 1;
      this.list = [];
      this.finished = false;
      this.getGamesList(this.currentIndex);
    },
    goToLoginPage() {
      // 获取浏览器 URL 中的 invited_code 参数
      const urlParams = new URLSearchParams(window.location.search);
      const invitedCode = urlParams.get("invite_code");
      //console.log("invitedCode:", invitedCode);
      // 构建 register 页面的路径，并将 invited_code 作为参数传递
      const registerPath = {
        path: "/login",
        query: { invite_code: invitedCode },
      };

      // 使用 $router.push 导航到 register 页面
      this.$router.push(registerPath);
    },
    goToRegisterPage() {
      // 获取浏览器 URL 中的 invited_code 参数
      const urlParams = new URLSearchParams(window.location.search);
      const invitedCode = urlParams.get("invite_code");
      //console.log("invitedCode:", invitedCode);
      // 构建 register 页面的路径，并将 invited_code 作为参数传递
      const registerPath = {
        path: "/register",
        query: { invite_code: invitedCode },
      };

      // 使用 $router.push 导航到 register 页面
      this.$router.push(registerPath);
    },

    formatMoney,
    // 获取用户信息
    async getHttpInfo() {
      let res = await httpInfo();
      if (res.code == 0) {
        this.assets_total = res.data?.diamond || 0;
      }
    },
    // 余额
    // httpGameBalance
    async getHttpGameBalance() {
      let res = await httpGameBalance();
      if (res.code === 0) {
        this.gold = res.data?.gold || 0;
        // this.getHttpGameBalance();
      }
    },
    // async gethttpGameBalance(){
    //   let res = await httpHomeBanner();
    // },
    // 首页banner
    async getHttpHomeBanner() {
      let res = await httpHomeBanner();
      if (res.code == 0) {
        this.banners = res.data || [];
      }
    },
    // 游戏分类
    async getHttpGameClass() {
      let res = await httpGameClass();
      if (res.code == 0) {
        this.ganmeClass = res.data || [];
      }
    },

    onLoad(index) {
      console.log("下拉");
      if (index !== 0) {
        this.pages.page += 1;
      }
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.getGamesList(index);
    },
    onRefresh() {
      this.pages.page = 0;
      this.list = [];
      this.refreshing = false;
      this.finished = false;
      this.loading = true;
      this.getGamesList(this.currentIndex);
    },
    // 游戏列表
    async getHomeGamesList() {
      if (this.listAjax) return;
      let params = {
        page: this.pages.page,
        pagesize: 30,
      };
      this.listAjax = true;
      let res = await httpHomeRecommend(params);
      this.listAjax = false;
      this.listLoading = false;
      if (res.code == 0) {
        this.homeGameList = res.data || [];
      }
    },
    // 游戏列表
    async getGamesList(index) {
      let obj = this.ganmeClass[index];
      let id = obj ? obj.id : 0;
      if (this.listAjax) return;
      let params = {
        page: this.pages.page,
        pagesize: 21,
        category_id: id,
      };
      if (obj && obj.category_list.length > 0 && obj.sort_list.length > 0) {
        params[obj.sort_list[0].key] = obj.sort_list[0].value;
        params[obj.category_list[0].key] = obj.category_list[0].value;
      }
      if (this.sortSelected) {
        let sort = obj.sort_list.find((v) => v.name == this.sortSelected);
        params[sort.key] = sort.value;
      }
      if (this.cateSelected) {
        let cate = obj.category_list.find((v) => v.name == this.cateSelected);
        params[cate.key] = cate.value;
      }
      this.listAjax = true;
      this.listLoading = true;
      let res = await httpHomeList(params);
      this.listAjax = false;
      this.listLoading = false;
      if (res.code == 0) {
        // 数据全部加载完成
        if (this.list.length >= res.data.page.total_count) {
          this.finished = true;
        } else {
          this.list.push(...res.data.list);
        }
        // this.list = res.data.list || [];
        this.pages.page = res.data.page.page_index || 1;
        this.pages.pagesize = res.data.page.page_size || 1;
        if (this.list === null || this.list.length == 0) {
          this.pages.page = 0;
        }
        if (this.list === null || this.list.length == 0) {
          this.pages.nodata = true;
          this.finished = true;
          this.finishedText = "";
        } else {
          this.pages.nodata = false;
          this.finishedText = "没有更多了";
        }
      }
    },
    // 获取sid
    async getHttpPrepareEnterGame() {
      let res = await httpPrepareEnterGame();
      if (res.code == 0) {
        this.sid = res.data.sid || "";
      }
    },
    // 轮播图点击事件
    // async bannerClick(v) {
    //   if (!localStorage.getItem("TOKEN")) return this.$router.push("/Register");
    //   if (!v.parameter.id) return;
    //   if (this.startAjax) return;
    //   let params = {
    //     id: v.parameter.id,
    //   };
    //   this.startAjax = true;
    //   let res = await httpEnterGame(params);
    //   if (res.code == 0) {
    //     const gameUrl = new URL(res.data.parameter.url);
    //     const invitedCode = this.$route.query.invite_code;
    //     if (invitedCode) {
    //       gameUrl.searchParams.set("invite_code", invitedCode);
    //     }
    //     window.location.href = gameUrl.toString();
    //   } else {
    //     this.$toast.fail(res.message);
    //   }
    //   this.startAjax = false;
    // },

    async bannerClick(v) {
      // if (!localStorage.getItem("TOKEN")) return this.$router.push("/Register");
      if (!localStorage.getItem("TOKEN")) {
        this.goToRegisterPage(); // 跳转到注册页面，会携带 invite_code 参数
        return;
      }
      if (!v.parameter.id) return;
      if (this.startAjax) return;
      let params = {
        id: v.parameter.id,
      };
      this.startAjax = true;
      let res = await httpEnterGame(params);
      if (res.code == 0) {
        window.location.href = res.data.parameter.url;
      } else {
        this.$toast.fail(res.message);
      }
      this.startAjax = false;
    },
    // 开始游戏
    // async start(id) {
    //   if (!localStorage.getItem("TOKEN")) return this.$router.push("/Register");
    //   if (this.startAjax) return;
    //   let params = {
    //     id,
    //   };
    //   this.startAjax = true;
    //   let res = await httpEnterGame(params);
    //   if (res.code == 0) {
    //     const gameUrl = new URL(res.data.parameter.url);
    //     const invitedCode = this.$route.query.invite_code;
    //     if (invitedCode) {
    //       gameUrl.searchParams.set("invite_code", invitedCode);
    //     }
    //     window.location.href = gameUrl.toString();
    //   } else {
    //     this.$toast.fail(res.message);
    //   }
    //   this.startAjax = false;
    // },

    async start(id) {
      // if (!localStorage.getItem("TOKEN")) return this.$router.push("/Register");
      if (!localStorage.getItem("TOKEN")) {
        this.goToLoginPage(); // 跳转到注册页面，会携带 invite_code 参数
        return;
      }
      if (this.startAjax) return;
      let params = {
        id,
      };
      this.startAjax = true;
      let res = await httpEnterGame(params);
      if (res.code == 0) {
        // setAllScreen(true, document);
        window.location.href = res.data.parameter.url;
        // this.iframeUrl = res.data || '';
      } else {
        this.$toast.fail(res.message);
      }
      this.startAjax = false;
    },

    changeLang(val, index) {
      localStorage.setItem("accept_language", val);
      this.isShow = false;
      this.selectIndex = index;
      this.$i18n.locale = val;
      location.reload();
    },
    handleScroll() {
      const { scrollTop, clientHeight, scrollHeight } = event.target;
      const maxScroll = scrollHeight - (scrollTop + clientHeight);
      const isScrollingUp = scrollTop > this.lastScrollTop; // this.lastScrollTop 是上一次滚动位置
      if (maxScroll <= 0 && isScrollingUp) {
        // 到达顶部并且正在上滑
        this.pages.page++;
        this.getGamesList(this.currentIndex);
      }

      this.lastScrollTop = scrollTop;
      // const { scrollTop, clientHeight, scrollHeight } = event.target;
      // // 当滚动条距离底部不超过100px时，执行你想要的操作
      // if (scrollHeight - (scrollTop + clientHeight) <= 10) {
      //   // 到达底部，执行你的逻辑
      //   this.pages.page++;
      //   this.getGamesList(this.currentIndex);
      // } else {
      //   this.pages.page = this.pages.page || 1;
      // }
    },
  },
  mounted() {
    //   const header = document.querySelector(".header");
    //   const headerCard = document.querySelector(".header-card");
    //   if (header) {
    //     const headerHeight = header.offsetHeight;
    //     headerCard.style.paddingTop = `${headerHeight}px`;
    //   }
    // window.addEventListener("popstate", function () {
    //   window.scrollTo(0, 0);
    // });
  },
};
</script>

<style lang="less" scoped>
* {
  font-weight: 400;
  color: #93653e;
}

.language {
  position: relative;
  .dropdown-menu {
    width: 10rem;
    font-size: 1.75rem;
    position: absolute;
    right: -12%;
    top: 140%;
    background: #bb7f7f;
    border: 0.0625rem solid #bb7f7f;
    border-radius: 0.5rem;
    text-align: center;
    padding: 0.625rem 0 0 0;
    .isActive {
      color: #ce3f19 !important;
    }
    li {
      margin-bottom: 0.625rem;
      cursor: pointer;
      font-weight: 600;
      height: 3.75rem;
      display: flex;
      justify-content: center;
      line-height: 3.75rem;
      cursor: pointer;
      &:last-child {
        margin-bottom: 0;
      }
      &:first-child {
        border-bottom: 0.0625rem solid #fff;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.down {
  display: flex;
  vertical-align: baseline;
  margin: 1.25rem 0;
}

.p5-1-pp {
  display: flex;
  justify-content: space-between;
}

.home {
  width: 100%;
  min-height: 100vh;
  position: relative;
  // background-color: #C96B5F;

  .header-card {
    width: 100%;
    // height: 27.375rem;
    // background: url("~@/assets/img/ucenterheader.png") top/46.875rem 27.375rem no-repeat;
    // background-color: #C96B5F;
    padding: 0 1rem 0;
    // margin-bottom: 3.25rem;

    .header {
      width: 100%;
      height: 5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 20;
      padding: 0 1.5rem;
      background: transparent;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      transition: all 0.25s;

      &.active {
        background: #ef755e;
        box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
      }

      .header-l {
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 2.2rem;
          height: 2.2rem;
        }
      }

      .header-l1 {
        position: relative;
        margin: 0 0 0 5%;
        img {
          width: 25vw;
          height: 9.2vw;
          margin: 0 0 0 5%;
          display: block;
          border-radius: 0.625rem;
          position: relative;
          display: flex;
          justify-content: center;
        }

        .text-overlay {
          position: absolute;
          top: 50%;
          left: 54%;
          transform: translate(-50%, -50%);
          font-size: 0.7rem;
          // font-size: 1.5rem;
          font-weight: bold;
          color: white;
          text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
          z-index: 1;
          white-space: nowrap;
          /* 设置z-index为1，确保文字位于图片上方 */
        }
      }

      .header-r {
        width: 40vw;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .iconbox {
          // width: 3rem;
          // height: 3rem;
          margin-left: 6%;
          display: flex;
          justify-content: left;
          // background: #ccc;

          img {
            width: 1.4rem;
            height: 100%;
            // transform: scaleX(-1);
          }

          &.at {
            border-radius: 50%;
            // overflow: hidden;
            // width: 4.25rem;
            // height: 4.25rem;
            display: flex;
            align-items: center;
            justify-content: center;

            .no-at {
              width: 1.4rem;
              height: 100%;
              // display: inline-block;
              // text-align: center;
              // line-height: 1.5;
              // background-color: #ccc;
              // width: 100%;
              // height: 100%;
              // display: flex;
              // align-items: center;
              // justify-content: center;
              // font-size: 2.375rem;
              // font-weight: 400;
              // color: #fff;
              // transform: scaleX(-1);
            }

            .at-icon {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 1.2rem;
              font-weight: 400;
              color: #fff;
              padding: 0.2rem 0.5rem;
            }
          }
        }
      }
    }

    .part1 {
      width: 100%;
      padding-left: 1.875rem;
      margin-bottom: 3.75rem;

      .part1-title {
        font-size: 1.5rem;
        letter-spacing: 0.12rem;
        color: rgba(171, 182, 212, 1);
        margin-bottom: 0.625rem;
      }

      .part1-cont {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .part1-cont-l {
          letter-spacing: 0.12rem;
          color: rgba(112, 126, 162, 1);
          font-size: 2.5rem;
          font-weight: 400;

          span {
            font-size: 1.5rem;
            font-weight: 400;
          }
        }

        .part1-cont-r {
          font-size: 1.75rem;
          font-weight: 400;
          letter-spacing: 0.14rem;
          color: rgba(255, 255, 255, 1);
          width: 12.5625rem;
          height: 4.4375rem;
          background: url("~@/assets/img/ucenter-info-t3.png") center/12.5625rem
            4.4375rem;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-bottom: 0.5rem;
        }
      }
    }
  }
  .main {
    padding: 0 1rem 0;
    margin: 0 0 2rem 0;
    .part5 {
      padding: 1.2rem;
      margin-bottom: 2.5rem;
      width: 100%;
      height: 100%;
      background: linear-gradient(178.44deg, #e5c184 100%, #e5c184 100%);
      border-radius: 1.25rem;
      box-shadow: 0rem 0.4vw 1.6vw 0rem rgba(20, 19, 19, 0.56);

      .p5-l {
        .p5-l-p1 {
          // color: rgba(112, 126, 162, 1);
          font-size: 1.75rem;
          // font-weight: 400;
          letter-spacing: 0.1875rem;
          margin-bottom: 0.9375rem;

          span {
            letter-spacing: 0.12rem;
            font-size: 1.4rem;
            // font-size: 2.5rem;
            font-weight: 400;
            padding: 0 0.625rem;
          }

          img {
            width: 2.5rem;
            margin: -0.5rem;
            padding: 0 0.0625rem;
          }
        }

        .p5-l-p2 {
          width: 100%;
          height: 4.5rem;

          font-size: 1.75rem;
          font-weight: 400;
          letter-spacing: 0.1875rem;
          color: rgba(255, 255, 255, 1);
          display: flex;
          align-items: center;
          justify-content: space-around;

          p {
            font-weight: 400;
          }

          .p5-l-p2-item {
            // width: 11.25rem;
            width: 45%;
            height: 100%;
            // flex: 1;
            border-radius: 0.5rem;
            text-align: center;
            font-size: 20px;
            font-weight: 400;
            padding: 0.625rem;
            // height: 100%;
            display: flex;
            // flex-direction: column;
            align-items: center;
            justify-content: center;

            img {
              width: 2.5rem;
              height: 2.5rem;
              margin: 0.5rem;
            }
            p {
              font-size: 1rem;
            }
          }

          .p5-l-p2-item-1 {
            background: linear-gradient(178.44deg, #ffffff 0%, #ffe2c4 100%);
            color: #c1a286;
          }

          .p5-l-p2-item-2 {
            background: linear-gradient(178.44deg, #ffffff 0%, #b3e6f1 100%);
            color: #81aeb9;
          }

          .p5-l-p2-item-3 {
            background: linear-gradient(178.44deg, #ffffff 0%, #ffddce 100%);
            color: #bca093;
          }
        }
      }

      .p5-r {
        width: 4.5rem;
        height: 4.5rem;
        margin-left: 1.25rem;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .swiperbox {
      // width: 42.875rem;
      width: 100%;
      height: 300px;
      // height: 21.4375rem;
      opacity: 1;
      box-shadow: 0rem 0.25rem 0.75rem 0rem rgba(109, 109, 109, 0.43);
      margin: auto;
      border-radius: 1.25rem;
      overflow: hidden;
      position: relative;

      .van-swipe {
        width: 100%;
        height: 100%;
      }

      // top: -5rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .main::before {
    content: "";
    display: block;
    height: 5rem;
    width: 100%;
  }

  .gamesTabs {
    width: 100%;
    // width: 46.875rem;
    padding: 0 1rem 0 !important;
    ul {
      display: flex;
      justify-content: start;
      align-content: space-around; /* 添加这一行 */
      align-items: center;
      flex-wrap: wrap;
      li {
        width: 21%;
        background: #e5c184;
        min-height: 50px;
        margin-right: 4%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.625rem;
        cursor: pointer;
        border-radius: 0.3125rem;
        font-size: 0.75rem;
        &:last-child {
          margin-right: 0;
        }
      }
      .active {
        background: #ffe2c4;
      }
    }
  }
  .selectType {
    width: 96%;
    height: 1.5rem;
    background: #e5c185;
    // padding: 0 1rem;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: start;
    align-items: center;
    .line {
      width: 0.12rem;
      height: 80%;
      border-radius: 0.3rem;
      background: #eddbdb;
    }
    .dropdown {
      flex: 1;
      min-width: 40%;
      border: 0.0625rem solid #e5c185;
      border-radius: 0.3125rem;
      cursor: pointer;
      position: relative;
    }

    .dropdown-selected {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px;
      background: #e5c185;
      font-size: 0.7rem;
      .van-icon {
        margin-left: 0.5rem;
      }
    }

    .dropdown-content {
      position: absolute;
      width: 100%;
      top: 170%;
      border: 0.0625rem solid #ffe2c4;
      border-top: none;
      z-index: 1;
      background: #ffe2c4;
      border-radius: 0.3125rem;
      box-sizing: border-box;
      font-size: 0.7rem;
    }

    .dropdown-item {
      padding: 0.4rem;
      transition: background-color 0.3s;
    }

    .dropdown-item:hover {
      background-color: #e5c185;
    }
    select {
      padding: 0 0.5rem;
      border-radius: 0.3125rem;
      background: #e5c184;
      min-height: 2.5rem;
    }
  }

  .cont {
    width: 100%;
    height: 100%;
    padding: 1.875rem 0.625rem 0;
    display: flex;
    justify-content: space-between;
    // background-color: #b3e6f1;

    .leftbar {
      width: 8.25rem;
      margin-right: 2.375rem;

      .leftbar-list {
        width: 8.875rem;
        max-height: 94vh;
        // overflow-y: auto;
        transition: all 0.25s;

        &.activess {
          position: fixed;
          top: 8.75rem;
        }

        /*   */
        .leftbar-item {
          width: 6.25rem;
          height: 6.25rem;
          background: linear-gradient(
            90.43deg,
            rgba(250, 250, 254, 1) 0%,
            rgba(222, 222, 235, 1) 100%
          );
          border: 0.0625rem solid rgba(247, 247, 247, 1);
          border-radius: 1.25rem;
          margin-bottom: 1.625rem;

          display: flex;
          user-select: none;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          img {
            width: 3rem;
            height: 3rem;
            margin-bottom: 1rem;
          }

          p {
            font-size: 1.25rem;
            font-weight: 600;
            letter-spacing: 0.035rem;
            text-align: center;
            // color: white;
            // color: rgba(132, 144, 177, 1);
          }

          &.active {
            background: linear-gradient(
              90.43deg,
              rgba(254, 243, 228, 1) 0%,
              rgba(216, 192, 168, 1) 100%
            );
            border: 0.0625rem solid rgba(247, 247, 247, 1);
            color: rgba(191, 154, 115, 1);
          }
        }
      }
    }

    .grid {
      // width: 100%;
      // height: 100%;
      display: grid;
      gap: 10px;
      margin-bottom: 20px; /* 分离各个分类 */
    }
    .grid-3 {
      display: flex;
      justify-content: start;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px; /* 分离各个分类 */
    }
    .columns-1 {
      grid-template-columns: repeat(1, 1fr);
    }

    .columns-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .columns-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .columns-4 {
      grid-template-columns: repeat(4, 1fr);
    }
    .gameList {
      display: flex;
      justify-content: start;
      align-items: start;
      .gameBox {
        width: 100%;
        min-height: 10rem;
        display: flex;
        justify-content: start;
        align-items: start;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 0.625rem;
          // z-index: -1;
        }
        .text {
          width: 100%;
          color: #fff;
          background: rgba(0, 0, 0, 0.7);
          position: absolute;
          bottom: 0;
          left: 0;
          text-align: center;
          font-size: 0.85rem;
          line-height: 1.2rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .gameList1 {
      display: flex;
      justify-content: start;
      align-items: start;
      .gameBox1 {
        width: 100%;
        min-height: 5rem;
        display: flex;
        justify-content: start;
        align-items: start;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 0.625rem;
          // z-index: -1;
        }
        .text {
          width: 100%;
          color: #fff;
          background: rgba(0, 0, 0, 0.7);
          position: absolute;
          bottom: 0;
          left: 0;
          text-align: center;
          font-size: 0.85rem;
          line-height: 1.2rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .large-item {
      width: 100%;
      height: 100%;
      flex: 1;
      min-height: 14rem;
      margin-left: 0.125rem;
      grid-row: span 2;
      position: relative;
      .text {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        text-align: center;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        font-size: 0.85rem;
        line-height: 1.2rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 0.625rem;
      }
    }

    .small-items {
      width: 30%;
      height: 100%;
      min-height: 10rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      margin-left: 0.1rem;
      .small-item {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.15rem;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 0.625rem;
          // z-index: -1;
        }
        .text {
          width: 100%;
          color: #fff;
          background: rgba(0, 0, 0, 0.7);
          position: absolute;
          bottom: 0;
          left: 0;
          text-align: center;
          font-size: 0.85rem;
          line-height: 1.2rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .small-items1 {
      min-height: 5rem;
      width: 50%;
      height: 50%;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: start;
      margin-left: 0.1rem;
      .small-item {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.15rem;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 0.625rem;
          // z-index: -1;
        }
        .text {
          width: 100%;
          color: #fff;
          background: rgba(0, 0, 0, 0.7);
          position: absolute;
          bottom: 0;
          left: 0;
          text-align: center;
          font-size: 0.85rem;
          line-height: 1.2rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .small-items2 {
      min-height: 10rem;
      width: 50%;
      height: 50%;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: start;
      margin-left: 0.1rem;
      .small-item {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.15rem;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 0.625rem;
          // z-index: -1;
        }
        .text {
          width: 100%;
          color: #fff;
          background: rgba(0, 0, 0, 0.7);
          position: absolute;
          bottom: 0;
          left: 0;
          text-align: center;
          font-size: 0.85rem;
          line-height: 1.2rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }

    .cont-right-box {
      flex: 1;
      height: 100%;
      .title {
        margin-bottom: 1rem;
        font-size: 1.875rem;
        font-weight: 600;
        letter-spacing: 0.0375rem;
        line-height: 1;
        color: rgba(132, 144, 177, 1);
      }

      // background: #ef755e;
      .lodingbox {
        width: 100%;
        height: 31.25rem;
        display: flex;
        justify-content: center;
      }
      .gameLists {
        height: 300px;
        display: grid;
        grid-template-columns: repeat(auto-fill, 30%);
        justify-content: space-between;
        gap: 10px;
      }

      .crb-item {
        width: 100%;
        height: 100%;
        margin-bottom: 1.625rem;
        display: inline-block;
        cursor: pointer;

        // background-color: #ef755e;
        /**border-radius: 1.25rem;
       box-shadow: 0 .3125rem .3125rem rgba(109, 109, 109, 0.1);**/
        /**background: #f8f8f8;**/

        /**padding: 0 1.75rem;**/
        /**position: relative;**/
        &-back {
          width: 100%;
          height: 100%;
        }

        &-body {
          /**position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;**/
          // background: rgba(255, 255, 255, 0.95);
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: column;
          padding: 0 0.3125rem;
          font-size: 0.875rem;
          // color: white;

          .name {
            font-size: 1.625rem;
            font-weight: 400;
            letter-spacing: 0.0375rem;
            line-height: 1;
            // color: rgba(112, 126, 162, 1);
            word-break: break-all;
            text-align: center;
            margin-top: 0.667vh;
            color: white;
          }
        }

        .card-icon {
          width: 5rem;
          height: 5rem;
          background: url(~@/assets/img/card-icon.png) center/5rem 5rem
            no-repeat;
          position: absolute;
          top: 0;
          left: 0;
        }

        .txtbox {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .name {
            font-size: 1.875rem;
            font-weight: 400;
            letter-spacing: 0.0375rem;
            line-height: 1.3;
            color: rgba(112, 126, 162, 1);
            word-break: break-all;
            text-align: center;
            padding-right: 0.625rem;
          }

          .name-tpx {
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: 0.03rem;
            color: rgba(171, 182, 212, 1);
          }
        }

        .imgbox {
          width: 100%;
          height: 6rem;
          //border: .25rem solid rgba(236, 236, 236, 1);
          background: #f9f3dd;
          box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(129, 140, 170, 0.65);
          border-radius: 1.25rem;
          overflow: hidden;
          flex-shrink: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          position: relative;

          img {
            width: 100%;
            height: 100%;
          }
          .text {
            width: 100%;
            color: #fff;
            background: rgba(0, 0, 0, 0.7);
            position: absolute;
            bottom: 0;
            left: 0;
            text-align: center;
            font-size: 0.85rem;
            line-height: 1.8rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
      .crb-item1 {
        width: 33%;
        /** height: 15.875rem;**/
        margin-bottom: 1.625rem;
        display: inline-block;
        cursor: pointer;
        &-back {
          width: 100%;
          height: 100%;
        }

        &-body {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-direction: column;
          padding: 0 0.3125rem;
          font-size: 0.875rem;
          .name {
            font-size: 1.625rem;
            font-weight: 400;
            letter-spacing: 0.0375rem;
            line-height: 1;
            // color: rgba(112, 126, 162, 1);
            word-break: break-all;
            text-align: center;
            margin-top: 0.667vh;
            color: white;
          }
        }

        .card-icon {
          width: 5rem;
          height: 5rem;
          background: url(~@/assets/img/card-icon.png) center/5rem 5rem
            no-repeat;
          position: absolute;
          top: 0;
          left: 0;
        }

        .txtbox {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .name {
            font-size: 1.875rem;
            font-weight: 400;
            letter-spacing: 0.0375rem;
            line-height: 1.3;
            color: rgba(112, 126, 162, 1);
            word-break: break-all;
            text-align: center;
            padding-right: 0.625rem;
          }

          .name-tpx {
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: 0.03rem;
            color: rgba(171, 182, 212, 1);
          }
        }

        .imgbox {
          width: 100%;
          // height: 12.5rem;
          //border: .25rem solid rgba(236, 236, 236, 1);
          background: #f9f3dd;
          box-shadow: 0rem 0.25rem 0.625rem 0rem rgba(129, 140, 170, 0.65);
          border-radius: 1.25rem;
          overflow: hidden;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .order {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
  }
}

iframe {
  width: 100vw;
  height: 100vh;
  border: none;
  z-index: 500;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
